<template>
  <div class="view-container">
    <div class="title-box animate__animated animate__fadeInDown">
      <h1 class="view-title">报到系统数据</h1>
    </div>
    <div class="main-container animate__animated animate__lightSpeedInLeft">
      <div class="data-box">
        <el-card>
          <div class="freshman-chart-box1" style="width: 100%">
            <div id="enrolled" style="width: 100%; height: 41vh;"></div>
            <div class="chart-description" style="height: 41vh">
              <h1 style="margin: 20px;font-weight: bold;font-size: 20px">新生入学比例说明</h1>
              <div style="height: 20vh;margin: 20px;display: flex;align-items: center">
                <p>新生已入学和未入学的数据对比</p>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <div class="data-box">
        <el-card>
          <div class="freshman-chart-box2" style="width: 100%">
            <div class="chart-description" style="height: 55vh">
              <h1 style="margin: 20px;font-weight: bold;font-size: 20px">报到地点</h1>
              <div style="height: 20vh;margin: 20px;display: flex;align-items: center">
                <p>新生入学报到地点</p>
              </div>
            </div>
            <div id="demo1" style="width: 100%; height: 55vh;"></div>
          </div>
        </el-card>
      </div>
      <div class="data-box">
        <el-card>
          <div class="freshman-chart-box1" style="width: 100%">
            <div id="demo2" style="width: 100%; height: 60vh;"></div>
            <div class="chart-description" style="height: 60vh">
              <h1 style="margin: 20px;font-weight: bold;font-size: 20px">生源地对比</h1>
              <div style="height: 20vh;margin: 20px;display: flex;align-items: center">
                <p>新生生源地数据对比</p>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  onBeforeUnmount,
  onMounted,
  reactive,
  ref
} from 'vue';
import * as echarts from "echarts";

/*----------变量定义开始---------*/
//新生入学占比
let enrolledChart
const enrolledData = ref([
  { value: 1048, name: '未入学' },
  { value: 735, name: '已入学' },
])
const enrolledOption = reactive( {
  tooltip: {
    trigger: 'item'
  },
  title: {
    text: '新生入学比例',
    left: 'center'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '新生入学比例',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      padAngle: 5,
      itemStyle: {
        borderRadius: 10
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: []
    }
  ]
})

//demo1
let demo1Chart
const demo1Data = ref([
  {
    name: '南校区',
    children: [
      {
        name: '本科新生',
        value: 14,
        children: [
          {
            name: '南校区门口报到',
            value: 14
          }
        ]
      },
      {
        name: '研究生新生',
        value: 10,
        children: [
          {
            name: '新校区门口报到',
            value: 10
          }
        ]
      }
    ]
  },
  {
    name: '校本部',
    children: [
      {
        name: '本科新生',
        value: 14,
        children: [
          {
            name: '和平楼报到',
            value: 14
          }
        ]
      },
      {
        name: '研究生新生',
        value: 10,
        children: [
          {
            name: '岳麓山庄报到',
            value: 10
          }
        ]
      }
    ]
  },
  {
    name: '铁道校区',
    children: [
      {
        name: '本科新生',
        value: 14,
        children: [
          {
            name: '世纪楼报到',
            value: 14
          }
        ]
      },
      {
        name: '研究生新生',
        value: 10,
        children: [
          {
            name: '铁路园报到',
            value: 10
          }
        ]
      }
    ]
  },
  {
    name: '湘雅校区',
    children: [
      {
        name: '本科新生',
        value: 14,
        children: [
          {
            name: '校门口报到',
            value: 14
          }
        ]
      },
      {
        name: '研究生新生',
        value: 10,
        children: [
          {
            name: '教学楼报到',
            value: 10
          }
        ]
      }
    ]
  },
]);
const demo1Option = reactive({
  title: {
    text: '新生旭日图',
    left: 'right'
  },
  series: {
    type: 'sunburst',
    // emphasis: {
    //     focus: 'ancestor'
    // },
    data: [],
    radius: [0, '90%'],
    label: {
      rotate: 'radial'
    }
  }
});

//demo2
let demo2Chart
const demo2Option = reactive({
  title: {
    text: '新生入学对比',
    subtext: '',
    left: 'left',
    top: 'bottom'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c}%'
  },
  toolbox: {
    show: true,
    orient: 'vertical',
    top: 'center',
    feature: {
      dataView: { readOnly: false },
      restore: {},
      saveAsImage: {}
    }
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: ['湖南', '河南', '广西', '新疆', '江西']
  },
  series: [
    {
      name: '新生生源地',
      type: 'funnel',
      width: '40%',
      height: '45%',
      left: '5%',
      top: '50%',
      funnelAlign: 'right',
      data: [
        { value: 60, name: '广西' },
        { value: 30, name: '新疆' },
        { value: 10, name: '江西' },
        { value: 80, name: '河南' },
        { value: 100, name: '湖南' }
      ]
    },
    {
      name: '新生生源地',
      type: 'funnel',
      width: '40%',
      height: '45%',
      left: '5%',
      top: '5%',
      sort: 'ascending',
      funnelAlign: 'right',
      data: [
        { value: 60, name: '广西' },
        { value: 30, name: '新疆' },
        { value: 10, name: '江西' },
        { value: 80, name: '河南' },
        { value: 100, name: '湖南' }
      ]
    },
    {
      name: '新生生源地',
      type: 'funnel',
      width: '40%',
      height: '45%',
      left: '55%',
      top: '5%',
      funnelAlign: 'left',
      data: [
        { value: 60, name: '广西' },
        { value: 30, name: '新疆' },
        { value: 10, name: '江西' },
        { value: 80, name: '河南' },
        { value: 100, name: '湖南' }
      ]
    },
    {
      name: '新生生源地',
      type: 'funnel',
      width: '40%',
      height: '45%',
      left: '55%',
      top: '50%',
      sort: 'ascending',
      funnelAlign: 'left',
      data: [
        { value: 60, name: '广西' },
        { value: 30, name: '新疆' },
        { value: 10, name: '江西' },
        { value: 80, name: '河南' },
        { value: 100, name: '湖南' }
      ]
    }
  ]
})
/*----------变量定义结束---------*/


/*----------钩子开始---------*/
onMounted(() => {
  enrolledChart = echarts.init(document.getElementById("enrolled"))
  enrolledOption.series[0].data = enrolledData.value
  enrolledChart.setOption(enrolledOption)

  demo1Chart = echarts.init(document.getElementById("demo1"))
  demo1Option.series.data = demo1Data.value
  demo1Chart.setOption(demo1Option)

  demo2Chart = echarts.init(document.getElementById("demo2"))
  demo2Chart.setOption(demo2Option)
})
onBeforeUnmount(() => {
  enrolledChart.dispose()
  demo1Chart.dispose()
  demo2Chart.dispose()
})
/*----------钩子结束---------*/



/*----------函数定义开始---------*/
/*----------函数定义结束---------*/
</script>

<style scoped>
.view-container{
  padding-top: 20px;
  width: 90%;
  overflow: hidden;
}
.title-box{
  animation-duration: 0.5s;
}
.view-title{
  font-size: 40px;
  font-weight: bolder;
  margin-bottom: 30px;
}
.main-container{
  width: 100%;
  height: 200vh;
}
.data-box{
  margin-bottom: 2vh;
}
.chart-description{
  width: 100%;
  background-color: #c5e7fa;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.freshman-chart-box1{
  display: grid;
  grid-template-columns: 3fr 1fr;
  column-gap: 2%;
}
.freshman-chart-box2{
  display: grid;
  grid-template-columns: 1fr 3fr;
  column-gap: 2%;
}
</style>
